// - React注册事件与DOM的事件语法非常像
// - 语法on+事件名 =｛事件处理程序｝ 比如onClick={this.handleClick}
// - 注意：React事件采用驼峰命名法，比如onMouseEnter, onClick

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  // 多行代码，建议写成函数
  handlerClick() {
    // alert('点击button1');
    console.log('Hello React----->');
    console.log('Hello React2----->');
    console.log('Hello React3----->');
    console.log('Hello React4----->');
    console.log('Hello React5----->');
  }

  render() {
    return (
      <div>
        {/* on+大写驼峰的事件名 多行代码，建议写成函数 */}
        <button onClick={this.handlerClick}>点击</button>
        {/* 推荐 代码量少： 使用一个箭头函数 */}
        <button onClick={() => alert('点击button2')}>点击2</button>
        {/* 不推荐 */}
        {/* <button onClick={function () { alert('点击button3'); }} > 点击3 </button> */}
      </div>
    );
  }
}
// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
